<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Avatar from '@sscd/avatar';
  const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
  const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
  const avatarValue = ref(UserList[0]);
  const color = ref(colorList[0]);
  const changeValue = () => {
    const index = UserList.indexOf(avatarValue.value);
    avatarValue.value = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];
    color.value = index < colorList.length - 1 ? colorList[index + 1] : colorList[0];
  };
</script>

<template>
  <div class="demo">
    <div class="demo-title">自动调整字符大小</div>
    <div class="demo-content">
      <Avatar
        shape="square"
        size="large"
        :style="{ backgroundColor: color, verticalAlign: 'middle' }"
      >
        {{ avatarValue }}
      </Avatar>
      <Button
        size="small"
        :style="{ marginLeft: '16px', verticalAlign: 'middle' }"
        @click="changeValue"
      >
        改变
      </Button>
    </div>
  </div>
</template>
